<script setup lang="ts">
import { ref } from "vue";
import { positionFormRules } from "../utils/rule";
import { PositionFormProps } from "../utils/types";

defineOptions({
  name: "PositionForm"
});

interface PositionFormComponentProps {
  formInline: PositionFormProps["formInline"];
}

const props = withDefaults(defineProps<PositionFormComponentProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    code: "",
    type: 1,
    description: "",
    width: null,
    height: null,
    status: 1,
    pagePosition: "",
    sort: 0,
    remark: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 广告位类型选项
const typeOptions = [
  { label: "横幅广告", value: 1 },
  { label: "侧边栏广告", value: 2 },
  { label: "弹窗广告", value: 3 },
  { label: "浮动广告", value: 4 },
  { label: "内容页广告", value: 5 }
];

// 状态选项
const statusOptions = [
  { label: "启用", value: 1 },
  { label: "禁用", value: 0 }
];

// 页面位置选项
const pagePositionOptions = [
  { label: "首页", value: "首页" },
  { label: "列表页", value: "列表页" },
  { label: "详情页", value: "详情页" },
  { label: "用户中心", value: "用户中心" },
  { label: "全站", value: "全站" }
];

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="positionFormRules"
    label-width="100px"
    label-position="left"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="广告位名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            placeholder="请输入广告位名称"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="广告位编码" prop="code">
          <el-input
            v-model="newFormInline.code"
            placeholder="请输入广告位编码"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="广告位类型" prop="type">
          <el-select
            v-model="newFormInline.type"
            placeholder="请选择广告位类型"
            class="w-full"
          >
            <el-option
              v-for="type in typeOptions"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
          >
            <el-option
              v-for="status in statusOptions"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="宽度" prop="width">
          <el-input-number
            v-model="newFormInline.width"
            :min="1"
            :max="9999"
            placeholder="请输入宽度"
            class="w-full"
          >
            <template #append>px</template>
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高度" prop="height">
          <el-input-number
            v-model="newFormInline.height"
            :min="1"
            :max="9999"
            placeholder="请输入高度"
            class="w-full"
          >
            <template #append>px</template>
          </el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="页面位置" prop="pagePosition">
          <el-select
            v-model="newFormInline.pagePosition"
            placeholder="请选择页面位置"
            class="w-full"
            filterable
            allow-create
          >
            <el-option
              v-for="position in pagePositionOptions"
              :key="position.value"
              :label="position.label"
              :value="position.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            v-model="newFormInline.sort"
            :min="0"
            :max="999"
            placeholder="请输入排序值"
            class="w-full"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="广告位描述" prop="description">
      <el-input
        v-model="newFormInline.description"
        type="textarea"
        :rows="3"
        placeholder="请输入广告位描述"
      />
    </el-form-item>

    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="newFormInline.remark"
        type="textarea"
        :rows="2"
        placeholder="请输入备注信息"
      />
    </el-form-item>
  </el-form>
</template>